<template>
    <div
            v-loading="loading"
            class="app-container"
            :element-loading-text="loadingText"
    >
        <!-- 挂号编号的查询条件开始 -->
        <el-form ref="queryForm" label-width="88px">
            <el-form-item label="挂号单ID" prop="regId">
                <el-input
                        v-model="regId"
                        clearable
                        placeholder="请输入挂号单号"
                        size="small"
                        style="width:300px"
                />
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">读取IC卡</el-button>
            </el-form-item>
        </el-form>
        <!-- 挂号编号的查询条件结束 -->
        <!-- 挂号输入框下面的所有内容开始 -->
        <div v-if="careHistory.regId!==undefined">
            <!-- 病例信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-form label-position="right" label-width="120px" inline class="demo-table-expand">
                    <el-form-item label="挂号单号:">
                        <span v-text="careHistory.regId"/>
                    </el-form-item>
                    <el-form-item label="医生姓名:">
                        <span v-text="careHistory.userName"/>
                    </el-form-item>
                    <el-form-item label="科室名称:">
                        <span v-text="careHistory.deptName"/>
                    </el-form-item>
                    <el-form-item label=" 患者姓名:">
                        <span v-text="careHistory.patientName"/>
                    </el-form-item>
                    <el-form-item label="就诊时间:">
                        <span v-text="careHistory.careTime"/>
                    </el-form-item>
                    <el-form-item label="主诉:">
                        <span v-text="careHistory.caseTitle"/>
                    </el-form-item>
                    <el-form-item label="诊断信息:">
                        <span v-text="careHistory.caseResult"/>
                    </el-form-item>
                    <el-form-item label="医生建议:">
                        <span v-text="careHistory.doctorTips"/>
                    </el-form-item>
                </el-form>
            </el-card>
            <!-- 病例信息结束 -->
            <!-- 工具按钮开始 -->
            <el-card style="margin-bottom: 5px">
                <el-button type="success" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
                <el-button type="success" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
                <el-button type="danger" icon="el-icon-bank-card" @click="handlePayWithCash">现金支付</el-button>
              <el-button type="success" icon="el-icon-bank-card" @click="handlePayWX">微信支付</el-button>
                <span style="margin-left:20px">订单总额:<span
                        style="color:red;margin-left:20px">￥:{{ allAmount }}</span></span>
            </el-card>
            <!-- 工具结束开始 -->
            <!-- 未支付的处方信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-collapse v-if="careOrders.length>0" v-model="activeNames">
                    <el-collapse-item v-for="(item,index) in careOrders" :key="index" :name="index">
                        <template slot="title">
                            【{{ item.coType==='0'?'药用处方':'检查处方' }}】【{{ index+1 }}】【处方总额】:￥{{ item.allAmount }}
                        </template>
                        <el-table
                                ref="refTable"
                                v-loading="loading"
                                border
                                :data="item.careOrderItems"
                                :row-class-name="tableRowClassName"
                                @selection-change="handleCareOrderItemSelectionChange($event,item.coId)"
                        >
                            <el-table-column type="selection" width="55" align="center"/>
                            <el-table-column label="序号" align="center" type="index" width="50"/>
                            <el-table-column :label="item.coType==='0'?'药品名称':'项目名称'" align="center" prop="itemName"/>
                            <el-table-column label="数量" align="center" prop="num"/>
                            <el-table-column label="单价(元)" align="center" prop="price"/>
                            <el-table-column label="金额(元)" align="center" prop="amount"/>
                            <el-table-column label="备注" align="center" prop="remark"/>
                            <el-table-column label="状态" align="center" prop="status" :formatter="statusFormatter"/>
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
            <!-- 未支付的处方信息结束 -->
            <!-- 挂号输入框下面的所有内容结束 -->
          <!-- Wx支付收银台开始 -->
          <el-dialog
              title="收银台"
              width="30%"
              :visible.sync="dialogVisible">
            <div style="text-align: center">
              <p>微信支付 {{ payResult.totalFee }} 元</p>
              <div style="border:1px solid #3f3f3f; width: 228px; padding: 10px; margin: 0 auto">
                <vue-qr
                    :text="payResult.content"
                    :margin="8"
                    colorDark="#008000"
                    :logo-src="require('@/assets/logo.png')"
                    colorLight="#ffffff"
                    :size="200">
                </vue-qr>
              </div>
            </div>
            <el-divider></el-divider>
            <div style="font-size: 13px;">
              提示：<br>
              支付成功前请勿手动关闭页面<br>
              二维码两小时内有效，请及时扫码支付
            </div>
          </el-dialog>
          <!--微信支付收银台结束-->
        </div>
        <div v-else style="text-align:center">请输入正确的挂号单ID查询</div>

        <el-dialog
                title="请使用支付宝支付"
                :visible.sync="openPay"
                center
                :close-on-click-modal="false"
                :before-close="handleClose"
                append-to-body
        >
            <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
                <el-card>
                    <el-form-item label="订单号:">
                        <span>{{ payObj.orderId }}</span>
                    </el-form-item>
                    <el-form-item label="总金额:">
                        <span>{{ payObj.allAmount }}</span>
                    </el-form-item>
                </el-card>
            </el-form>
            <div style="text-align:center">
                <vue-qr :text="payObj.payUrl" :size="200"/>
                <div>请使用支付宝扫码</div>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    import {
        getNoChargeCareHistoryByRegId,
        createOrderChargeWithCash,
        createOrderChargeWithZfb,
        queryOrderChargeOrderId
    } from '@/apis/charge/charge'
    // 引入生成二维码的组件
    import vueQr from 'vue-qr'
    import {getDictDataAPI} from "@/apis/comm/dictData";

    export default {
        components: {
            vueQr
        },
        data() {
            return {
              orderNo:"CO1704885665343992145",
              payResult:{
                totalFee:"",
                content:"",
                orderId:""
              },
              dialogVisible: false,
                // 整体遮罩
                loading: false,
                // 设置遮罩层的文字
                loadingText: '',
                // 用户输入的挂号单号
                regId: undefined,
                // 病例对象
                careHistory: {},
                // 处方信息
                careOrders: [],
                // 处方详情的状态字典
                statusOptions: [],
                // 当前选中的订单总额
                allAmount: 0.00,
                // 当前选中的所有项目集合
                itemObjs: [],
                // 展开的折叠面板的名字
                activeNames: [],
                // 支付对象
                payObj: {},
                // 是否打开支付宝二维码支付层
                openPay: false,
                // 定时轮询对象
                intervalObj: undefined,
              //订单id
              orderId: null

            }
        },
        created() {
            // 加载状态的字典数据
            getDictDataAPI('his_order_details_status').then(res => {
                this.statusOptions = res?.data
            })

        },
      // // ▼▼▼ 新增的生命周期钩子 ▼▼▼
      // beforeDestroy() {
      //   this.cleanupPaymentPolling();
      // },
        methods: {
          //根据订单号查询支付状态
          queryPayStatus(orderId){
              this.$http.post('/charge/dispenseMedicine/queryPayStatus/'+this.orderId).then(res=>{
                console.log(res)
                if (res.code===200){
                  this.dialogVisible = false;
                  //消除定时器
                  clearInterval(this.intervalObj)
                  this.intervalObj = null;
                  this.msgSuccess('支付成功')
                  // 新增：重新查询挂号单信息，刷新页面数据
                  this.handleQuery();
                }
              })
          },
          async handlePayWX() {
            if (!this.careHistory.regId) {
              this.msgError('请输入挂号单ID查询')
              return
            } else if (this.itemObjs.length === 0) {
              this.msgError('请选择要支付的项目')
              return
            }else {
              // 组装数据
              const postObj = {
                orderChargeDto: {
                  orderAmount: this.allAmount,
                  chId: this.careHistory.chId,
                  regId: this.careHistory.regId,
                  patientName: this.careHistory.patientName
                },
                orderChargeItemDtoList: []
              }
              // 组装项目信息
              this.itemObjs.filter(item => {
                const obj = {
                  itemId: item.itemId,
                  coId: item.coId,
                  itemName: item.itemName,
                  itemPrice: item.price,
                  itemNum: item.num,
                  itemType: item.itemType,
                  itemAmount: item.amount
                }
                postObj.orderChargeItemDtoList.push(obj)
              })

              try {
                // 1. 生成订单并获取订单号
                const res1 = await this.$http.post(
                    `/charge/dispenseMedicine/createOrder`,
                    postObj
                );
                this.orderId = res1.data;

                // 2. 确保订单号已赋值后再执行下一步
                // console.log("订单号:", this.orderId);

                // 3. 调用创建支付接口
                const res2 = await this.$http.post(
                    `/charge/dispenseMedicine/createNavite/${this.orderId}`
                );
                this.payResult = res2.data;
                // 4. 启动定时轮询（新增代码）
                // //设置一个定时任务，每隔3秒调用一次
                this.intervalObj = setInterval(() => {
                  this.queryPayStatus(this.payResult.orderId)
                }, 3000)

                // 5. 显示弹窗
                this.dialogVisible = true;

              } catch (error) {
                console.error("支付流程异常:", error);
                // 可选：提示用户错误信息
                this.$message.error("支付请求失败，请重试");

              }
            }
          },
          // // 新增方法：启动支付状态轮询
          // startPaymentPolling() {
          //   // 先清除已有定时器
          //   this.cleanupPaymentPolling();
          //
          //   // 启动新定时器
          //   this.intervalObj = setInterval(async () => {
          //     try {
          //       const res = await this.$http.post(
          //           `/charge/dispenseMedicine/queryPayStatus/${this.orderId}`,
          //       {}
          //       );
          //       alert(JSON.stringify(res))
          //
          //       if (res.data.code === 200) {
          //         this.$message.success('支付成功');
          //         this.dialogVisible = false;
          //         this.resetCurrentParams();
          //         this.cleanupPaymentPolling();
          //       }
          //     } catch (error) {
          //       console.error('支付状态查询失败:', error);
          //       this.cleanupPaymentPolling();
          //     }
          //   }, 3000); // 每3秒查询一次
          //
          //   // 设置30分钟超时（可选）
          //   this.paymentTimeout = setTimeout(() => {
          //     this.$message.warning('支付超时，请重新发起支付');
          //     this.cleanupPaymentPolling();
          //     this.dialogVisible = false;
          //   }, 1800000); // 30分钟
          // },
          //
          // // 新增方法：清理轮询资源
          // cleanupPaymentPolling() {
          //   clearInterval(this.intervalObj);
          //   clearTimeout(this.paymentTimeout);
          //   this.intervalObj = null;
          //   this.paymentTimeout = null;
          // },

          // 查询
            handleQuery() {
                if (this.regId === '') {
                    this.msgError('请输入挂号单号')
                    this.resetCurrentParams()
                    return
                }
                this.careHistory = {}
                this.careOrders = []
                this.itemObjs = []
                this.loading = true
                this.loadingText = '数据查询中，请稍后...'
                getNoChargeCareHistoryByRegId(this.regId).then(res => {
                    this.careHistory = res.data.careHistory
                    this.careOrders = res.data.careOrders
                    this.loading = false
                    this.loadingText = ''
                    this.careOrders.filter((c, index) => {
                        this.activeNames.push(index)
                    })
                }).catch(() => {
                    this.msgError('查询失败')
                    this.loading = false
                    this.loadingText = ''
                })
            },
            // 翻译处方详情状态
            statusFormatter(row) {
                return this.selectDictLabel(this.statusOptions, row.status)
            },
            // 监听多个表格的checkbox的选中事件
            handleCareOrderItemSelectionChange(selection, coId) {
                if (this.itemObjs.length === 0) {
                    this.itemObjs = selection
                } else {
                    for (let i = 0; i < this.itemObjs.length; i++) {
                        const obj = this.itemObjs[i]
                        if (obj.coId === coId) {
                            this.itemObjs.splice(i, 1)
                            i--
                        }
                    }
                    // 最后再来添加
                    selection.filter(newItem => {
                        this.itemObjs.push(newItem)
                    })
                }
                // 调用计算选中的总额
                this.computeAllAmount()
            },

            // //计算选中的总额
            computeAllAmount() {
                this.allAmount = 0
                this.itemObjs.filter(item => {
                    this.allAmount += item.amount
                })
            },
            tableRowClassName({row, rowIndex}) {
                row.index = rowIndex
            },
            // 全选择
            handleSelectAll() { // 先取消再反选择
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                    t.toggleAllSelection() // 注意不要用错方法了
                })
            },
            // 取消全选
            handleUnSelectAll() {
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                })
            },
            // 现金支付
            handlePayWithCash() {
                if (!this.careHistory.regId) {
                    this.msgError('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    this.msgError('请选择要支付的项目')
                    return
                } else {
                    // 组装数据
                    const postObj = {
                        orderChargeDto: {
                            orderAmount: this.allAmount,
                            chId: this.careHistory.chId,
                            regId: this.careHistory.regId,
                            patientName: this.careHistory.patientName
                        },
                        orderChargeItemDtoList: []
                    }
                    // 组装项目信息
                    this.itemObjs.filter(item => {
                        const obj = {
                            itemId: item.itemId,
                            coId: item.coId,
                            itemName: item.itemName,
                            itemPrice: item.price,
                            itemNum: item.num,
                            itemType: item.itemType,
                            itemAmount: item.amount
                        }
                        postObj.orderChargeItemDtoList.push(obj)
                    })
                    // 发送请求
                    this.loading = true
                    this.loadingText = '订单创建并现金支付中'
                    this.$confirm('是否确定创建订单并使用现金支付?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        console.log(postObj)
                        createOrderChargeWithCash(postObj).then(res => {
                            this.msgSuccess('订单创建并现金支付成功')
                            this.resetCurrentParams()
                            this.loading = false
                        }).catch(() => {
                            this.msgError('创建订单失败')
                            this.loading = false
                        })
                    }).catch(() => {
                        this.msgError('创建已取消')
                        this.loading = false
                    })
                }
            },
            // 支付宝支付
            handlePayWithZfb() {
                if (!this.careHistory.regId) {
                    this.msgError('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    this.msgError('请选择要支付的项目')
                    return
                } else {
                    // 组装数据
                    const postObj = {
                        orderChargeDto: {
                            orderId: null,
                            orderAmount: this.allAmount,
                            chId: this.careHistory.chId,
                            regId: this.careHistory.regId,
                            patientName: this.careHistory.patientName
                        },
                        orderChargeItemDtoList: []
                    }
                    this.itemObjs.filter(item => {
                        const obj = {
                            itemId: item.itemId,
                            coId: item.coId,
                            itemName: item.itemName,
                            itemPrice: item.price,
                            itemNum: item.num,
                            itemType: item.itemType,
                            itemAmount: item.amount
                        }
                        postObj.orderChargeItemDtoList.push(obj)
                    })
                    // 发送请求
                    this.loading = true
                    this.loadingText = '订单创建并支付宝支付中'
                    this.$confirm('是否确定创建订单并使用支付宝支付?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        createOrderChargeWithZfb(postObj).then(res => {
                            this.payObj = res.data

                            // postObj.orderChargeDto.orderId = this.payObj.orderId

                            this.msgSuccess('订单创建成功，请扫码支付')
                            const tx = this
                            tx.openPay = true// 打开支付的弹出层
                            // 定时轮询
                            tx.intervalObj = setInterval(function () {
                                // 根据ID查询订单信息
                                queryOrderChargeOrderId(tx.payObj.orderId).then(r => {
                                    if (r.data == '1') { // 说明订单状态为支付成功
                                        // 清空定时器
                                        clearInterval(tx.intervalObj)
                                        tx.$notify({
                                            title: '支付成功',
                                            message: '【' + tx.payObj.orderId + '】的订单编写支付成功',
                                            type: 'success'
                                        })
                                        tx.openPay = false
                                        tx.resetCurrentParams()
                                    }
                                }).catch(() => {
                                    // 清空定时器
                                    clearInterval(tx.intervalObj)
                                })
                            }, 2000)
                            this.loading = false
                        }).catch(() => {
                            this.msgError('创建订单失败')
                            this.loading = false
                        })
                    }).catch(() => {
                        this.msgError('创建已取消')
                        this.loading = false
                    })
                }
            },
            // 清空careHistory和careOrders
            resetCurrentParams() {
                this.careHistory = {}
                this.careOrders = []
            },
            // 如果用户没有支付，而弹出层被关闭了
            handleClose() {
                this.$confirm('您确定放弃支付吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.msgError('您已放弃支付，可以回到收费查询列表里面再次支付')
                    this.resetCurrentParams()
                    this.openPay = false
                    // 关闭轮询
                    clearInterval(this.intervalObj)
                }).catch(() => {
                    this.msgSuccess('欢迎继续支付')
                })
            }
        }
    }
</script>
<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
